<template>
  <div class="content">
    <header>
      <div></div>
      <div>
        <div class="nav_top">
          <span>晚上好</span>
          <span>2021-6-18 星期五</span>
        </div>
        <div>
          <span>{{ lifeContent[0].remark }}</span>
        </div>
      </div>
    </header>
    <div class="life">
      <div>
        <span>
          {{ lifeContent[1].lifeModuleConfigRelationDTOS[0].relationName }}
        </span>
        <span>MORE > </span>
      </div>
      <div>
        {{ lifeContent[1].lifeModuleConfigRelationDTOS[0].contentBrief }}
      </div>
      <div>
        <div class="swiper">
          <img
            :src="
              lifeContent[1].lifeModuleConfigRelationDTOS[0].recommendImgUrl
            "
            alt=""
          />
          <img
            :src="
              lifeContent[4].lifeModuleConfigRelationDTOS[1].recommendImgUrl
            "
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="members">
      <div>
        <span>会员福利</span>
        <span>MORE> </span>
      </div>
      <div>
        <img
          :src="lifeContent[2].lifeModuleConfigRelationDTOS[0].goodsImg"
          alt=""
        />
        <!-- <img
          :src="lifeContent[2].lifeModuleConfigRelationDTOS[0].goodsImg"
          alt=""
        />
        <img
          :src="lifeContent[2].lifeModuleConfigRelationDTOS[0].goodsImg"
          alt=""
        /> -->
      </div>
      <div></div>
    </div>
    <div class="life">
      <div>
        <span>{{ buildingList.contentName }}</span>
        <span>MORE > </span>
      </div>
      <div>{{ buildingList.contentBrief }}</div>
      <div>
        <div class="swiper">
          <img
            :src="
              lifeContent[3].lifeModuleConfigRelationDTOS[0].recommendImgUrl
            "
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="scroll">
      <!-- 横滚 -->
      <LifeList />
    </div>
    <div class="footer">
      <div v-for="(item, index) in footList" :key="index">
        <div>
          <dl>
            <dt>
              <h1>{{ item.contentName }}</h1>
              <p>{{ item.contentBrief }}</p>
            </dt>
            <dd>
              <img :src="item.imgUrl" alt="" />
            </dd>
          </dl>
        </div>
        <div>
          <span>{{ item.label }}</span>
          <span>{{ item.browseNumber }}</span>
          <span>{{ item.contentType }}</span>
          <span>❤ {{ item.likeNumber }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LifeList from "../../components/LifeList";
import {
  lifeContent,
  getspecialByIdtwo,
  getspecialByIdone,
} from "../../server";
export default {
  data() {
    return {
      lifeContent: [],
      footList: [],
      buildingList: [],
    };
  },
  async onLoad() {
    let result = await lifeContent();
    if (result.retcode == 0) {
      this.lifeContent = result.result;
    }
    let building = await getspecialByIdone();
    if (building.retcode == 0) {
      this.buildingList = building.result;
    }

    let list = await getspecialByIdtwo();
    if (list.retcode == 0) {
      this.footList = list.result.lifeContentDtos;
    }
  },
  components: {
    LifeList,
  },
  methods: {},
};
</script>

<style scoped lang="scss">
header {
  width: 90%;
  height: 120rpx;
  display: flex;
  margin: 0 auto;
}
header > div:first-child {
  width: 120rpx;
  height: 120rpx;
  background: #ccc;
  border-radius: 50%;
}
header > div:last-child {
  width: 530rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  margin-left: 20rpx;
}
.nav_top {
  display: flex;
  justify-content: space-between;
}
.nav_top > span:first-child {
  font-size: 50rpx;
}
.life {
  margin-top: 80rpx;
}
.life > div:first-child {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx;
}
.life > div:first-child > span:first-child {
  font-size: 45rpx;
}
.life > div:first-child > span:last-child {
  font-size: 35rpx;
}
.life > div:nth-child(2) {
  color: #ccc;
  font-size: 35rpx;
  margin-left: 30rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.swiper {
  width: 90%;
  height: 550rpx;
  margin: 0 auto;
  display: flex;
  overflow-x: scroll;
}
.swiper img {
  width: 100%;
  margin: 0 auto;
  height: 550rpx;
}
.scroll {
  margin-top: 40rpx;
}
.build {
  width: 100%;
  height: 700rpx;
  margin-top: 30rpx;
}
.members {
  width: 90%;
  height: 550rpx;
  margin: 0 auto;
  > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    > img {
      width: 80rpx;
      height: 80rpx;
      display: inline;
    }
  }
}
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
  div {
    width: 95%;
    height: 450rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > dl {
      display: flex;
      justify-content: space-between;
      dt > h1 {
        font-size: 40rpx;
        font-weight: 900;
      }
      dt > p {
        font-size: 30rpx;
        color: #ccc;
      }
      dd > img {
        width: 300rpx;
        height: 300rpx;
      }
    }
    > div:last-child {
      display: flex;
      flex-direction: row;
      font-size: 28rpx;
      display: flex;
      margin: 45rpx 0;
      padding: 15rpx 0;
      border-top: 1rpx solid #ccc;
      justify-content: space-between;
      > span:first-child {
        color: orange;
      }
    }
  }
}
</style>
